<template>
    <div class="child">
        <h3>子组件:1</h3>
        <p>我有：{{ toy }} 玩具</p>
        <p>我有：{{ bookNum }} 本书</p>
        <p>我获得房产{{ count }}</p>
        <button @click="getFather($parent)">获取父组件信息</button>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

let count = ref(0);
let toy = ref('变形金刚')
let bookNum = ref(10);

//通过$parent参数获取数据
function getFather(params:any) {
    console.log(params.value);
    
    count.value=params.value
    params.value = params.value - params.value
    
}


defineExpose({bookNum,toy})

</script>

<style scoped>
.child {
    border: 1px solid #ccc;
    padding: 10px;
    margin: 10px 0;
    background-color: #f0f0f0;
}
</style>
